<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随手拍</title>
    <link rel="stylesheet" href="/css/elementui/index.css">
    <link rel="stylesheet" href="/css/exam/css/style.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <script src="/css/exam/js/httpVueLoader.js"></script>
</head>

<body>
    <div id="app">
        <!--导航切换-->
        <div class=".p-30">
            <el-form label-width="10px" :model="check" ref="verification">
                <el-row type="flex">

                    <el-form-item prop="name" label-width="30px">
                        <el-input v-model="check.name" placeholder="请输入名称"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="search_for">搜&ensp;&ensp;索</el-button>
                        <el-button @click="resetForm('verification')">重&ensp;&ensp;置</el-button>
                    </el-form-item>

                </el-row>
            </el-form>
            <!-- 表格 -->
            <div class="main">
                <el-table :data="tableData" border='' style="width:100%" type="flex" justify="center"
                    v-loading="loading">
                    <el-table-column label="序&ensp;&ensp;号" width="120" type="index" align='center' prop="">
                    </el-table-column>
                    <el-table-column label="照片/视频" width='' align='center' prop="images">
                        <template slot-scope="scope">
                            <img :src="tableData[ scope.$index ].images"
                                style="width:100px;height:100px;line-height:100px;margin:10px auto" />
                        </template>
                    </el-table-column>
                    <el-table-column label="描&ensp;&ensp;述" width="" align='center' prop="content">
                    </el-table-column>
                    <el-table-column label="位&ensp;&ensp;置" width="" align='center' prop="address">
                    </el-table-column>
                    <el-table-column label="提交人" width="" align='center' prop="users.name">
                    </el-table-column>
                    <el-table-column label="提交时间" width="" align='center' prop="updated_at">
                    </el-table-column>
                    <el-table-column label="现场查看人" width="" align='center' prop="assign_user.name">
                    </el-table-column>
                    <el-table-column label="操&ensp;&ensp;作" width="400" align='center'>
                        <template slot-scope="scope">
                            <el-button type="primary" @click="Inventory(scope.row)" size="mini">详&ensp;&ensp;情
                            </el-button>
                            <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, scope.row)"
                                size="mini">删&ensp;&ensp;除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 弹窗 -->
                <el-dialog :title="title" :visible.sync="dialogFormVisible" width="50%" :before-close="ai_dialog_close">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tablestyle">
                        <el-card class="box-card">
                            <div class="trstyle">

                                <p><b>描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述:&nbsp;&nbsp;</b>
                                    <span>@{{listone.content}}</span>
                                </p>
                                <p><b>位&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;置:&nbsp;&nbsp;</b> <span>@{{listone.address}}
                                </p>
                                <p><b>提&nbsp;交&nbsp;人:&nbsp;&nbsp;&nbsp;</b><span>@{{listone.user_name}}</p>
                                <p><b>提交时间:&nbsp;</b> <span>@{{listone.created_at}}</p>
                                <!-- <p class="url_img"><b>照片/视频:</b> <span><img :src="listone.images" ><video :src="listone.video" controls="controls">
                               </video></span></p> -->
                                <!-- http://120.224.176.28:38111/storage/images/20230510/b6d29fc7722877e37f4f94af28607655.jpg -->
                                <p class="url_img"><b>照片/视频:</b> <span>
                                        <el-image class="image" :src="listone.images"
                                            :preview-src-list="[listone.images]">
                                        </el-image>
                                        <video :src="listone.video" controls="controls"
                                            :style="{ display: listone.video == null?'none':'' }">
                                        </video>
                                    </span></p>
                            </div>
                        </el-card>
                        <el-card class="box-card" style="margin-top:20px">
                            <el-form ref="form" :model="meeting" label-width="180px">
                                <el-form-item label="现场查看人员分配:">
                                    <el-select v-model="meeting.personnel" placeholder="请选择"
                                        @change="unitChangeHandler">
                                        <el-option v-for="(value, key, index)  in options" :key="index"
                                            :label="value.name" :value="value.id">
                                        </el-option>
                                    </el-select>
                                    <el-row style="margin-top:40px">
                                        <el-button type="primary" @click="primary">确&ensp;&ensp;定</el-button>
                                        <el-button @click="cancellation">取&ensp;&ensp;消</el-button>
                                    </el-row>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </table>
                </el-dialog>
            </div>
            <!-- 分页组件 -->
            <div class="block" style="margin-top:15px;">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage" :page-sizes="[10,20,50,100]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
    </div>
    </div>
    <script src="/css/exam/js/vue.js"></script>
    <script src="/css/elementui/index.js"></script>
    <script src="/css/exam/js/axios.min.js"></script>
    <script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                user_id: '',
                id: '',
                meeting: {
                    personnel: ''
                },
                dialogFormVisible: false,
                listone: [],
                warehouse_materials_one: [], //数据信息
                title: '随手拍',
                options: [], //现场人员
                check: {
                    name: '',
                },
                tableData: [], //数据
                currentPage: 1, // 当前页码
                count: 30, // 总条数
                pageSize: 10, // 每页的数据条数

            }
        },
        created() {
            this.search_for()
            this.user_list()
        },
        methods: {
            // 详情
            async Inventory(rows) {
                console.log('row', rows.id);
                this.user_id = rows.id
                let res = await axios.get('/admin/records/data', {
                    params: {
                        id: rows.id,
                    }
                })
                this.listone = res.data.data
                this.meeting.personnel = res.data.data.assign_user_id
                this.dialogFormVisible = true
            },

            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields()
                this.search_for()
            },
            //搜索
            async search_for() {
                this.loading = true
                let res = await axios.get('/admin/records/list', {
                    params: {
                        name: this.check.name,
                        page: this.currentPage,
                        limit: this.pageSize
                    }
                })
                console.log('res888', res);
                this.tableData = res.data.data
                this.count = res.data.count
                this.loading = false
            },
            //取消
            cancellation() {
                this.dialogFormVisible = false
                this.listone.video = ''
                this.listone.content = ''
                this.listone.address = ''
                this.listone.user_name = ''
                this.listone.created_at = ''
                this.listone.images = ''
            },
            //x取消弹框
            ai_dialog_close() {
                this.dialogFormVisible = false
                this.listone.video = ''
                this.listone.content = ''
                this.listone.address = ''
                this.listone.user_name = ''
                this.listone.created_at = ''
                this.listone.images = ''
            },
            //得到指派的id
            async unitChangeHandler(val) {
                let index = this.options.findIndex(item => item.id == val)
                let curType = this.options[index].id
                this.id = curType

            },
            // 确定指派
            async primary() {
                let res = await axios.get('/admin/records/user_assign', {
                    params: {
                        user_id: this.id,
                        id: this.user_id
                    }
                })
                this.$message.success(res.data.message)
                this.dialogFormVisible = false
                this.search_for()
            },
            //被指派的用户列表
            async user_list() {
                let res = await axios.get('/admin/records/user_list')
                console.log('res6666666', res.data);
                this.options = res.data.data
            },
            // 删除列表行
            deleteRow(index, rows) {
                // this.loading = true   
                console.log('rows', rows.id);
                this.$confirm('确定要删除吗?', '信息', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',

                    })
                    .then(() => {
                        this.loading = true
                        axios.get('/admin/records/delete', {
                                params: {
                                    id: rows.id
                                }
                            })
                            .then(response => {
                                console.log('response', rows.id);
                                this.loading = false
                                this.search_for()

                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                            }).catch(error => {
                                console.log('请求失败：' + error);
                                // this.loading = true
                            })
                    })
            },
            // 分页页码  
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
                this.search_for()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.search_for()
            },
        },
    })
    </script>
    <style scoped>
    .el-table .el-table__cell:first-child {
        text-align: center;
    }

    .dashboard_text {
        height: 45px;
        line-height: 45px;
        background-color: #f3f3f3;
        padding-left: 30px;
        margin-bottom: 30px;
    }

    .p-30 {
        margin: 0 auto;
    }

    .trstyle b {
        margin: 20px 50px;
    }

    .main {
        padding: 0 30px;
    }

    .url_img {
        display: inline
    }

    .url_img img {
        vertical-align: middle;
        width: 150px;
        height: 150px
    }

    .image {
        vertical-align: middle !important;
        width: 150px;
        height: 150px
    }

    .url_img video {
        vertical-align: middle;
        width: 150px;
        height: 150px;
        margin: 20px;
    }

    a {
        color: #409EFF;
        text-decoration: none;
    }
    </style>
</body>

</html>